<template>
  <div class="settings_content">
    <div class="user_image">
      <img v-if="userInfo.image" :src="userInfo.image" alt="" />
      <div v-else class="user_img_name">{{ userRealName && userRealName.charAt(0) }}</div>
    </div>
    <div class="user_info">
      <div class="form_row">
        <div class="form_label">账号：</div>
        <div class="form_value">{{ userInfo.user_name }}</div>
      </div>
      <div class="form_row">
        <div class="form_label">用户名：</div>
        <div class="form_value">{{ userInfo.account }}</div>
      </div>
      <div class="form_row">
        <div class="form_label">邮箱：</div>
        <div class="form_value">{{ userInfo.email }}</div>
      </div>
      <div class="form_row">
        <div class="form_label">性别：</div>
        <div class="form_value">{{ userInfo.sex }}</div>
      </div>
      <div class="form_row">
        <div class="form_label">体重:</div>
        <div class="form_value">{{ userInfo.weight }}</div>
      </div>
    </div>
    <div class="operations">
      <div v-if="userInfo.user_name === 'admin'" class="button" @click="toBackend">后台</div>
      <div class="button danger" @click="loginout">注销</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import { removeToken } from '@/utils/auth';
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const store = useStore()
const router = useRouter()

const userInfo = ref({})

const userRealName = computed(() => {
  return userInfo.value.user_name || userInfo.value.account
})

onMounted(() => {
  userInfo.value = store.state.user.user
  console.log(userInfo.value.user_name, '===========>')

})

const toBackend = () => {
  router.push({ path: '/settings/backend' })
}

const loginout = () => {
  store.dispatch('LogOut').then(() => {
    router.push({ path: '/Login' })
  })
}
</script>

<style lang="scss" scoped>
.settings_content {
  .user_image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: var(--el-color-primary);
    margin: auto;
    margin-top: 50px;
    .user_img_name {
      text-align: center;
      line-height: 200px;
      color: #fff;
      font-size: 50px;
      font-weight: bold;
      font-style: italic;
    }
  }

  .user_info {
    margin-top: 60px;
    padding-left: 50px;
    .form_row {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .form_label {
        width: 100px;
        text-align: left;
      }
      .form_value {
        flex: 1;
        text-align: left;
      }
    }
  }

  .operations {
    position: absolute;
    bottom: 60px;
    width: calc(100% - 40px);
    padding: 20px;
    .button {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
      border-radius: 50px;
      color: #fff;
      background-color: var(--el-color-primary);
      &.danger {
        margin-top: 15px;
        background-color: var(--el-color-danger);
      }
    }
  }
}
</style>